import HeaderTitle from '@/components/Header/HeaderTitle';
import { AvatarDropdown, AvatarName } from '@/components/Header/RightContent/AvatarDropdown';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import Styles from './index.less';
import LanguageSwitcher from './LanguageSwitcher';

const Index: React.FC<{ title: string }> = ({ title }) => {
  const { initialState } = useModel('@@initialState');
  return (
    <Flex justify="space-between" style={{ paddingInline: 16 }}>
      <Flex align="center">
        <img src="/logo.png" style={{ height: 20 }} />
        <HeaderTitle title={title} />
      </Flex>
      <Flex align="center">
        <LanguageSwitcher />
        <AvatarDropdown>
          <Flex align="center" className={Styles.avatarWrapper}>
            <img src={initialState?.avatar} className={Styles.avatar} />
            <AvatarName />
          </Flex>
        </AvatarDropdown>
      </Flex>
    </Flex>
  );
};

export default Index;
